import {
    Row,
    Col,
    Flex,
    Typography,
    Button,
    Form,
    Input,
    Select,
    Table
} from 'antd'
import React, {useEffect, useState} from 'react'
import MyDatePicker from '../components/MyDatePicker'
import {triggerMsgAPI} from '../service/message'

export default function TouchBehaviorTrigger() {
    const [selectedDateString, setSelectedDateString] = useState()
    // 保存触发消息
    const [triggerMsgList, setTriggerMsgList] = useState([])
    // 查询所有触发消息
    useEffect(() => {
        ;(async () => {
            const res = await triggerMsgAPI()
            console.log(res)
            // 将触发消息由二维数组转为一维数组，并放入到列表
            setTriggerMsgList(res.data)
        })()
    }, [])
    return (
        <>
            <Row className="info">
                <Col span={24}>
                    <Flex justify={'space-between'}>
                        <Typography.Title level={3}>信息管理</Typography.Title>
                    </Flex>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Form layout="inline">
                        <Form.Item label="推送内容" name="storeName">
                            <Input style={{width: 200}}/>
                        </Form.Item>
                        <Form.Item label="行为条件" initialValue={'0'}>
                            <Select
                                style={{width: 200}}
                                placeholder="请选择行为条件"
                                options={[
                                    {
                                        value: '',
                                        label: '全部'
                                    },
                                    {
                                        value: '0',
                                        label: '启用'
                                    },
                                    {
                                        value: '1',
                                        label: '停用'
                                    }
                                ]}
                            />
                        </Form.Item>
                        <Form.Item label="推送时间">
                            <MyDatePicker
                                selectedDateString={selectedDateString}
                                setSelectedDateString={setSelectedDateString}
                            />
                        </Form.Item>
                        <Form.Item>
                            <Button type="default" htmlType="reset">
                                重置
                            </Button>
                        </Form.Item>
                        <Form.Item>
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Form>
                </Col>
            </Row>
            <Row className="container">
                <Col span={24}>
                    <Typography.Paragraph style={{fontSize: 16}}>
                        行为列表
                    </Typography.Paragraph>
                </Col>
                <Col span={24}>
                    <Table
                        // 分页器
                        pagination={{pageSize: 10}}
                        dataSource={triggerMsgList}
                        columns={[
                            {
                                title: '序号',
                                dataIndex: 'id',
                                key: 'id'
                            },
                            {
                                title: '推送内容',
                                dataIndex: 'content',
                                key: 'content'
                            },
                            {
                                title: '触发行为',
                                dataIndex: 'status',
                                key: 'status',
                                render: (status) => {
                                    // 0-通用 1-点赞  2-收藏 3- 评论 4-分享 5-关注 6-评论回复 7-关注回复 8-点赞回复
                                    switch (status) {
                                        case 0:
                                            return '后台'
                                        case 1:
                                            return '点赞'
                                        case 2:
                                            return '评论'
                                        case 3:
                                            return '关注'
                                        case 4:
                                            return '转发'
                                        case 5:
                                            return '收藏'
                                        case 6:
                                            return '优惠券使用'
                                        case 7:
                                            return '浏览'
                                        case 8:
                                            return '搜索'
                                        case 9:
                                            return '注册'
                                        case 10:
                                            return '登录'
                                    }
                                }
                            },
                            {
                                title: '推送时间',
                                dataIndex: 'createAt',
                                key: 'createAt'
                            }
                        ]}
                    />
                </Col>
            </Row>
        </>
    )
}
